<template>
  <el-form label-position="top">
    <el-form-item label="偏移">
      <div class="row-item">
        <div class="title">X轴</div>
        <el-input v-model.number="fakePanelData.offset[0]" placeholder="" @change="updateEffect" />
      </div>
      <div class="row-item">
        <div class="title">Y轴</div>
        <el-input v-model.number="fakePanelData.offset[1]" placeholder="" @change="updateEffect" />
      </div>
      <div class="row-item">
        <div class="title">Z轴</div>
        <el-input v-model.number="fakePanelData.offset[2]" placeholder="" @change="updateEffect" />
      </div>
    </el-form-item>
    <el-form-item label="颜色">
      <el-color-picker v-model="fakePanelData.color" show-alpha @change="updateEffect" />
    </el-form-item>

    <el-form-item label="半长轴长度">
      <div class="row-item">
        <el-slider
          show-input
          :max="1000"
          v-model="fakePanelData.semiMajorAxis"
          @change="updateEffect"
        ></el-slider>
      </div>
    </el-form-item>
    <el-form-item label="半短轴长度">
      <div class="row-item">
        <el-slider
          show-input
          :max="1000"
          v-model="fakePanelData.semiMinorAxis"
          @change="updateEffect"
        ></el-slider>
      </div>
    </el-form-item>
    <el-form-item label="速度">
      <div class="row-item">
        <el-slider
          show-input
          :max="100"
          v-model="fakePanelData.speed"
          @change="updateEffect"
        ></el-slider>
      </div>
    </el-form-item>
    <el-form-item label="图形个数">
      <div class="row-item">
        <el-slider
          show-input
          :max="10"
          v-model="fakePanelData.circleCount"
          @change="updateEffect"
        ></el-slider>
      </div>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
interface IProps {
  panelData: any;
}

const props = withDefaults(defineProps<IProps>(), {
  panelData: {},
});
const emits = defineEmits(['updateEffect']);

const fakePanelData = ref<any>({});

function updateEffect() {
  emits('updateEffect', fakePanelData.value);
}

watchEffect(() => {
  fakePanelData.value = props.panelData;
});
</script>

<style lang="less" scoped>
.ml10 {
  margin-left: 10px;
}
.mr12 {
  margin-right: 12px;
}
.style-image {
  &-wrap {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
  &-btn {
    color: #0560fd;
    cursor: pointer;
    margin-left: 20px;
  }
}
.emitter-wrap {
  .el-select,
  .el-input {
    margin-right: 10px;
    &:last-child {
      margin-right: 0px;
    }
  }
  .el-select {
    flex: 0 0 108px !important;
  }
  .el-input {
    flex: 0 0 60px !important;
    margin-right: 4px;
  }
}
</style>
